<template>
	<view>
		<wd-form ref="form" :model="info">
			<wd-cell-group border>
				<wd-input label="客户名" label-width="100px" prop="customer_name" v-model="info.customer_name" placeholder="请输入客户名"
					:rules="[{ required: true, message: '请填写客户名' }]" />
				<wd-textarea label="拜访内容" label-width="100px" prop="descript" v-model="info.descript" placeholder="请填写拜访内容"
					:rules="[{ required: true, message: '请填写拜访内容' }]" />
				<wd-picker label="拜访门店" v-if="cuList.length" label-width="100px" prop="cu_store_id" v-model="info.cu_store_id"
					:columns="cuList" placeholder="请选择拜访门店" :rules="[{ required: true, message: '请选择拜访门店' }]"  />
				<wd-cell title="图片" title-width="100px" prop="photos" :rules="[{ required: true, message: '请上传设备维修图片' }]" >
					<wd-upload :file-list="info.photos" :action="fileUploadAction" :header="header"  @success="handleFileSuccess"></wd-upload>
				</wd-cell>
			</wd-cell-group>
			<view class="mtp mxp">
				<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import { putVisit , postVisit , getVisitDetail } from "@/api/form.js"
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import apiService  from "@/api/server.js"
	import { API_BASE_URL } from "@/utils/request.js"
	const fileUploadAction = ref(`${API_BASE_URL}/tbx/sys/common/upload`)
	const header = ref({
		'X-Access-Token': uni.getStorageSync( 'etoken' )
	})

	const info = reactive({
		cu_store_id: "",
		customer_name: "",
		descript: "",
		photo: "",
		sys_user_id: "",
		photos: []
	})
	
	const cuList = ref([])
	
	const form = ref()
	const type = ref("create")
	const id = ref()
	
	const getDetail = () =>{
		 getVisitDetail(id.value).then(res =>{
			 Object.assign(info ,res )
			 info.photos = [res.photo]
		})
	}
	
	const getDist  = () =>{
		apiService.getList("45e545e15e8344eebf723ce231f78b21", {
			pageSize: 100,
			pageNo : 1,
			hasQuery: true,
			column: "id",
			order: "asc",
		}).then(res =>{
			let data = []
			res.records.map(item =>{
				data.push({
				    label: `${item.cu_customer_name}`,
				    value: item.id
				})
			})
			cuList.value = data
		})
	}
	
	onLoad((e)=>{
			getDist()
		if(e.id){
			id.value = e.id
			type.value = "edit"
			getDetail()
		}else{
			type.value = "create"
		}
		
	
	})
	
	const handleFileSuccess  = ({fileList}) =>{
		
		let list = ""
		fileList.map(({response}) =>{
			try{
				const fileRes = JSON.parse(response)
				list = `${API_BASE_URL}/tbx/${fileRes.message}`
			}catch (err){
				console.error("返回的格式不正确！", response)
			}
		})
		info.photo = list
	}

	const handleSubmit = (e) =>{
		form.value.validate().then(res => {
			if(res.valid){
				let data  = {}
				if(type.value === 'create'){
					data = {
						...info
					}
					delete data.photos
					postVisit(data).then(() =>{
						uni.showToast({
							icon:"none",
							title : "添加成功"
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 500)
					})
				}else{
					data = {
						params :{
							...info,
							id : id.value,
							sys_user_id : ""
						}
					}
					delete data.params.photos
					putVisit(data).then(() =>{
						uni.showToast({
							icon:"none",
							title : "编辑成功"
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 500)
					})
				}
			}
		})
	}
</script>

<style>

</style>